<template>
  <div class="filter-list">
    <slot name="title">
      <div class="filter-title">请选择筛选条件</div>
    </slot>
    <div class="filter-content">
      <div
        v-for="item in options"
        :key="item.field"
        class="filter-item"
        :class="{ active: active?.field === item.field }"
        :title="item.label"
        @mousedown="emit('change', item)"
        @mouseover="active = item">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRef, watchEffect } from 'vue'

import { useActiveKeyDown } from '../hooks/useActiveKeyDown'
import type { FilterItem } from '../types'

const props = defineProps<{
  options: FilterItem[]
}>()

const emit = defineEmits<{
  change: [value: FilterItem]
}>()

defineSlots<{
  title(): any
}>()
const active = ref<FilterItem>()

useActiveKeyDown({
  active,
  options: toRef(() => props.options),
  enterFn: (item) => emit('change', item)
})

watchEffect(() => {
  active.value = props.options[0]
})
</script>
